@layout("/common/_container.html"){
<style>
    .btnBox button {
        background: #30add1;
        color: white;
        border:1px solid #999999;
    }
    .templateStyle{
        background: #30add1;
        color: white;
        padding: 2px;

    }
    #template{ box-shadow: 0 0 7px #888888;flex: 3;display: flex;flex-direction: column;}
    .content-li{ margin: 0 25px;  border-bottom: 1px dashed #F1F1F1;  padding: 15px 0;display: flex}
    .absolutes{position: absolute;right: 0;top: 0;padding: 8px 15px;background: #00a8cb;color: white}
    .content-li>span:first-of-type{flex: 1;text-align: right}
    .content-li>span:last-of-type{flex: 5;}
    #templateBox{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
</style>
<div class="ibox-content" style="height: 100%;padding: 40px 30px 40px 0;">
    <div style="display: none">
        <input type="hidden" id="valValue" value="${val}">
    </div>
    <div style="display: flex;height: 100%">
        <div style="flex: 1" id="templateBox">
            <ul style="padding-left: 20px;">
                <li>
                    <span style="color: #00A8CB" class="glyphicon glyphicon-folder-open"></span>
                    <span>我的模板</span>
                </li>
                @for(item in reMap){
                <li class="oneClass" style="margin: 5px 0;">
                    <span style="color: #00A8CB" class="glyphicon glyphicon-plus-sign"></span>
                    <span style="color: #00A8CB;display: none" class="glyphicon glyphicon-minus-sign"></span>
                    <span>${item.key}</span>
                    <ul style="display: none;padding-left: 20px;">
                        @for(str in item.value){
                        <li class="twoClass" style="margin: 3px 0;">
                            <span style="color: #00A8CB" class="glyphicon glyphicon-plus-sign"></span>
                            <span style="color: #00A8CB;display: none" class="glyphicon glyphicon-minus-sign"></span>
                            <span>${str.key}</span>
                            <ul style="display: none;padding-left: 27px;">
                                @for(thr in str.value){
                                <li class="thrClass" style="margin: 3px 0;">
                                    <span style="color: #00A8CB" class="glyphicon glyphicon-file"></span>
                                    <span style="cursor: pointer;" onclick="dataShow('${thr.id}')">${thr.casename}</span>
                                </li>
                                @}
                            </ul>
                        </li>
                        @}
                    </ul>
                </li>
                @}
            </ul>
        </div>
        <div id="template" style="height: 100%">
            <div style="position: relative;flex: 1;border-bottom: 1px solid #dddddd">
                <div class="absolutes choice">初诊模板</div>
                <div class="absolutes choices">复诊模板</div>
                <h3 style="margin: 0;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 20px;" id="templateName"></h3>
            </div>
            <div style="overflow-y: auto;flex: 7">
                <div class="content-li choice">
                    <span>主述：</span>
                    <span id="zhushu"></span>
                </div>
                <div class="content-li choices">
                    <span>复诊：</span>
                    <span id="zhushu"></span>
                </div>
                <div class="content-li">
                    <span>现病史：</span>
                    <span id="nowMedicalHistory"></span>
                </div>
                <div class="content-li">
                    <span>既往史：</span>
                    <span id="beforeMedicalHistory"></span>
                </div>
                <div class="content-li">
                    <span>口腔检查：</span>
                    <span id="mouthCheck"></span>
                </div>
                <div class="content-li">
                    <span>辅助检查：</span>
                    <span id="auxiliaryCheck"></span>
                </div>
                <div class="content-li">
                    <span>诊断：</span>
                    <span id="diagnose"></span>
                </div>
                <div class="content-li">
                    <span>治疗计划：</span>
                    <span id="remedyPlan"></span>
                </div>
                <div class="content-li">
                    <span>处置：</span>
                    <span id="dispose"></span>
                </div>
                <div class="content-li">
                    <span>医嘱：</span>
                    <span id="doctorAdvice"></span>
                </div>
                <div style="text-align: center;padding: 15px;">
                    <button type="button" class="btn" style="width: 80px;background: #00a8cb;color: white" onclick="contentShow()">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
       if($("#valValue").val() == 1){
           $(".choices").hide()
       }else if($("#valValue").val() == 2){
           $(".choice").hide()
       }
    });

    $("#templateBox").on('click','.oneClass',function () {
        $(this).children('.glyphicon-plus-sign').toggle();
        $(this).children('.glyphicon-minus-sign').toggle();
        $(this).children('ul').toggle();
    });

    $("#templateBox").on('click','.twoClass',function (e) {
        e.stopPropagation();
        $(this).children('.glyphicon-plus-sign').toggle();
        $(this).children('.glyphicon-minus-sign').toggle();
        $(this).children('ul').toggle();
    });

    $("#templateBox").on('click','.thrClass span',function (e) {
        e.stopPropagation();
        $("span").removeClass('templateStyle');
        $(this).addClass('templateStyle');
    });

    dataShow = function (id) {
        $.ajax({
            type: "POST",
            url: Feng.ctxPath + "/doctorLooked/getCaseContent",
            data: {
                "id":id
            },
            dataType: "json",
            success: function (data) {
                $("#templateName").html(data.casename);
                $("#zhushu").html(data.zhushu);
                $("#nowMedicalHistory").html(data.nowMedicalHistory);
                $("#beforeMedicalHistory").html(data.beforeMedicalHistory);
                $("#mouthCheck").html(data.mouthCheck);
                $("#auxiliaryCheck").html(data.auxiliaryCheck);
                $("#diagnose").html(data.diagnose);
                $("#remedyPlan").html(data.remedyPlan);
                $("#dispose").html(data.dispose);
                $("#doctorAdvice").html(data.doctorAdvice);
            }
        });
    };

    contentShow = function () {
        window.parent.document.getElementById("zhushu").value = $("#zhushu").html();
        window.parent.document.getElementById("nowMedicalHistory").value = $("#nowMedicalHistory").html();
        window.parent.document.getElementById("beforeMedicalHistory").value = $("#beforeMedicalHistory").html();
        window.parent.document.getElementById("doctorAdvice").value = $("#doctorAdvice").html();
        window.parent.document.getElementsByClassName("remarks1")[0].value = $("#mouthCheck").html();
        window.parent.document.getElementsByClassName("remarks2")[0].value = $("#auxiliaryCheck").html();
        window.parent.document.getElementsByClassName("remarks3")[0].value = $("#diagnose").html();
        window.parent.document.getElementsByClassName("remarks4")[0].value = $("#remedyPlan").html();
        window.parent.document.getElementsByClassName("remarks5")[0].value = $("#dispose").html();
        parent.layer.close(parent.layer.getFrameIndex(window.name))
    }

</script>
@}
